<template>
  <div class="column-detail-page w-75 mx-auto">
    <div
      class="column-info row mb-4 border-bottom pb-4 align-items-center"
      v-if="column"
    >
      <div class="col-3 avatar-box text-center">
        <img
          v-if="column.avatar && column.avatar.url"
          :src="column.avatar && column.avatar.url"
          :alt="column.title"
          class="rounded-circle  border w-100"
        />
        <img
          v-else
          src="../assets/empty.jpg"
          :alt="column.title"
          class="rounded-circle   border w-100"
        />
      </div>
      <div class="col-9">
        <h4>{{ column.title }}</h4>
        <p class="text-muted">{{ column.description }}</p>
      </div>
    </div>
    <post-list :list="list"></post-list>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getColumn } from '@/api/column';
import { getPostsInColumn } from '@/api/post';
// import { useStore } from 'vuex';
import PostList from '../components/PostList.vue';
export default {
  components: {
    PostList,
  },
  setup() {
    const route = useRoute();
    const currentId = route.params.id;
    const column = ref({});
    const list = ref([]);
    let currentPage = 1;
    let pageSize = 5;

    const getColumnData = async () => {
      const res = await getColumn(currentId);
      column.value = res;
    };
    const getPostsInColumnData = async () => {
      const params = { currentId, currentPage, pageSize };
      const res = await getPostsInColumn(params);
      list.value = res.list;
    };

    onMounted(() => {
      getColumnData();
      getPostsInColumnData();
    });
    return {
      column,
      list,
    };
  },
};
</script>

<style lang="scss">
.avatar-box {
  width: 150px;
  height: 150px;
}
</style>
